<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据资产管理平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Google Font -->


	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<style>
		span {
			position: absolute;
			color: red;
			font-size: 10px;
			margin-left: 0.5rem;
		}
	</style>

</head>
<style>
	.err {
		font-size: 12px;
		color: rgb(246, 102, 102);
		display: block;
	}

	.success {
		display: none;
	}
</style>

<body>




<!-- Main -->
<div class="d-md-flex h-md-100 align-items-center">
	<div class="col-md-6 p-0 bg-indigo h-md-100"
		 style="background-image: url(./assets/img/demo/banner1.jpg);background-size: cover;">
		<div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
			<div class="logoarea pt-5 pb-5">
				<p>
					<!-- <i class="fa fa-anchor fa-3x"></i> -->
				</p>
				<h1 class="mb-0 mt-3 display-4">数据资产管理平台</h1>
			</div>
		</div>
	</div>
	<div class="col-md-6 p-0 bg-white h-md-100 loginarea">
		<div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
			<form class="border rounded p-5" id="form1">
				<h3 class="mb-4 text-center">修改密码</h3>
				<div class="form-group">
					<input type="password" class="form-control" id="InputOldPassword" placeholder="旧密码" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="InputNewPassword" placeholder="新密码(6-12位)"
						   required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="InputPassword" placeholder="确认密码" required="">
					<span></span>
				</div>
				<button type="submit" class="btn btn-success btn-round btn-block shadow-sm" id="succbtn">提交</button>
				<small class="d-block mt-4 text-center"><a class="text-gray"
														   href="./forgetPassword.html">忘记密码?</a></small>
			</form>
		</div>
	</div>
</div>
<!-- End Main -->


<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="js/tool.js" type="text/javascript"></script>
<script src="./assets/layui/layui.js" type="text/javascript"></script>

<script>
	$(function () {
		let password
		let password1
		let password2
		$("#InputOldPassword").blur(function () {
			password = $("#InputOldPassword").val();
			validatePassword($(this), password);
		})
		$("#InputNewPassword").blur(function () {
			password1 = $("#InputNewPassword").val();
			validatePassword($(this), password1);
		})
		$("#InputPassword").blur(function () {
			password2 = $("#InputPassword").val();
			if (!password2) {
				$(this).parent().find('span').html("*密码不能为空");
			} else if (password1 !== password2) {
				$(this).parent().find('span').html("*两次密码不一致");
			} else {
				$(this).parent().find('span').empty();
			}
		})

		function validatePassword(element, password) {
			if (!password) {
				element.parent().find('span').html("*密码不能为空");
			} else if (password.length < 6 || password.length > 12) {
				element.parent().find('span').html("*请输入6-12位密码");
			} else {
				element.parent().find('span').empty();
			}
		}

		//提交
		$('#form1').on('submit', function (e) {
			e.preventDefault();
			password = $("#InputOldPassword").val();
			password1 = $("#InputNewPassword").val();
			password2 = $("#InputPassword").val();

			if (password1 === password2 && password1.length >= 6 && password1.length <= 12) {
				$.ajax({
					timeout:30000,
					url: window.Http + `/system/user/profile/updatePwd?oldPassword=${password}&newPassword=${password1}`,
					type: 'PUT',
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					success: function (res) {
						if (res.code == 200) {
							// 成功跳转到登录页
							sessionStorage.setItem('Token', "");
							sessionStorage.setItem('UserId', "");
							window.location.href = './login.html'
						} else {
							layer.msg(res.msg);
						}
					},
					error: function (err) {
						layer.msg("服务器异常");
					}
				})
			} else {
				layer.msg("密码必须为6-12位，并且两次输入必须一致");
			}
		})
	})
</script>
</body>

</html>
